<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    其他的内容
    <h1>{{ msg }}</h1>

</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">


    new Vue({
        /*
        * render 也会把 el 区域覆盖，优先级高
        * */
        el: '#app',

        /*
        * 组件可以通过render方法进行渲染。方法接受一个 createElement 参数，该参数是一个函数，该函数的返回值就是最终渲染出来的内容。
        *
        * createElement 是用于创建虚拟 dom（vNode = virtual node 虚拟dom）
        *   参数1：标签的名称
        *   参数2：标签的内容
        *
        *
        *   虚拟DOM概念：指的是 使用 javascript 对象的方式去描述一个 真实的 dom 对象，这样的对象我们称之为 虚拟dom(vNode 或者 vDOm)
        *
        *   为什么要引入虚拟dom概念？
        *   在做项目的时候，有的时候只是部分的数据变了，没有必须要把页面的 dom 全部更新一遍，有些数据没有变的地方的dom结构是可以被复用。那么这个时候就需要存在一种算法（diff（单词 区别 差异） 算法 ），可以比较出哪些地方发生了变化，然后基于变化的地方做 dom 更新即可。
        *
        * 1. 算法
        * 2. 如何去定义数据结构，
        *   2.1 facebook的工程师最先提出虚拟dom概念，想到使用 js 对象（内存结构）的方式去描述一个 真实的 dom 结构。document.createElement('div')
        *   2.2 【首次】需要把数据和虚拟dom转换为真实的 dom 插入到dom结构里面。进行页面显示。
        *   2.3 以后如果数据变更了，页面要更新，但是在更新前，先生成所有的虚拟dom节点，然后使用 diff算法将新的虚拟dom和之前生成的虚拟dom进行比较，得出差异（patch 单词含义补丁）
        *   2.4 最后把 patch 的部分转换为真实的 dom 更新到页面的 dom树上面。实现显示
        *
        * 虚拟dom 主要是为了最大程序的实现 dom 结构的复用，提升渲染的性能。
        *
        * */
        render: function (createElement) {
            console.log(createElement('h1', '我是虚拟dom方式创建的 h1'), 'vNode');

            /*
            *
            * 为什么不直接使用这种 api 创建的虚拟dom，主要的原因是因为这样创建太过于繁琐了。如果是dom结构是嵌套的，则我们使用这种 api创建起来，非常的繁琐。
            * h1-->p-->a--->span
            * createElement('h1', createElement('p', createElement('a', createElement('span', '我是最内层的span'))));
            *
            * 后面就提出来了使用简化语法去写 虚拟 dom ，框架内部自动转换为 createElement 进行创建。
            *
            * 例如：react框架里面 使用的 jsx 语法创建虚拟 dom。
            *    let jsx = <h1>我是h1</h1>
            *
            *
            * 例如 vue 里面，我们可以使用组件对象方式创建虚拟 dom
            *
            *
            *
            * */


            return createElement('h1', '我是虚拟dom方式创建的 h1');
        },

        data: {
            msg: '虚拟dom'
        }
    })


</script>

</html>
